<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom属性</title>
  <style>
     .box{
        width: 100px;
        height: 100px;
        background-color: grey;
       border: 1px solid;
        color: white;
     }

     .success{
         background-color: green;
     }

     .default{
        text-align: center;
     }
  </style>
</head>
<body>


<input type="text" id="username" value="78" >
<a href="">主页</a>
<div id="box1" class="default">
   hello
</div>

</body>
<script>
    /**
     * 1. 一般属性
     *     获取
     *     设置
     * */

    var username =document.getElementById('username');

    // alert(username.value);
     username.value='admin';

   var links=   document.getElementsByTagName('a');
   links[0].href= "index.html"

    /**
     *  2. 样式
     *     style
     *     classname  classList
     * */

    var box1= document.getElementById('box1');

    //box1.style.display = 'none';

    // box1.style.width = '100px';
    // box1.style.height ='200px';
    // box1.style.border='1px solid';
    // box1.style.backgroundColor='green';


  // box1.className='box success';

    box1.classList.add('box');

    box1.classList.add('success');

   // box1.classList.remove('success');



</script>
</html>